<template>
  <div class="login">
    <div class="line">
      <label> 用户名：</label>
      <input type="text" placeholder="请输入用户名" v-model="user" />
    </div>
    <div class="line">
      <label>密码：</label>
      <input type="password" placeholder="请输入密码" v-model="pwd" />
    </div>
    <my-button @click="login" :isLoding="success">登录</my-button>
    <my-button @click="$router.push('/about')">去注册</my-button>
  </div>
</template>
<script>
import myButton from "../components/myButton.vue";
export default {
  components: { myButton },
  data() {
    return {
      user: "",
      pwd: "",
      success: false,
      userList: [], // 注册的用户列表
    };
  },
  created() {
    this.userList = JSON.parse(localStorage.getItem("userList")) || [];
  },
  methods: {
    login() {
      // 去注册
      let re = /([0-9]+[a-zA-Z]+|[a-zA-Z]+[0-9]+)/;
      console.log(re.test(this.user));
      if (re.test(this.user) && this.pwd) {
        this.success = true;
        setTimeout(() => {
          this.success = false;
          let bool = this.userList.some(
            (item) => item.user == this.user && item.pwd == this.pwd
          );
          if (bool) {
            localStorage.setItem("user", this.user);
            this.$router.push("/");
          }
        }, 2000);
      } else {
        alert("用户名或者密码输入不正确");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.login {
  padding: 20px;
  box-sizing: border-box;
}
.line {
  margin-bottom: 10px;
}
</style>
